import { Col, Row } from 'antd';
import { useSearchParams } from 'react-router-dom';
import CarAlarmTrend from '../../components/CarAlarmTrend';
import CarSafeIndexTrend from '../../components/CarSafeIndexTrend';
import { DriveBeSecPer } from '../../components/DriveBeSecPer';
import { PeerComparisonCar } from '../../components/PeerComparisonCar';
import SafeIndexRadarChart from '../../components/SafeIndexRadarChart';
export type PanelProps = {
  entId?: string;
  carId?: string;
  safetyIndexCarId: string;
};
const CarIndexPanel: React.FC<PanelProps> = (props) => {
  const [searchParams] = useSearchParams();

  const plateNumber = searchParams.get('plateNumber') || '';

  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col span={12}>
          {/* 单车辆安全指数雷达图 */}
          <SafeIndexRadarChart type="vehicle" title={`${plateNumber}的安全指数`} />
        </Col>
        <Col span={12}>
          {/*单车安全指数趋势图...*/}
          <CarSafeIndexTrend {...props}></CarSafeIndexTrend>
        </Col>

        <Col span={12}>
          {/*驾驶行为二级占比...*/}
          <DriveBeSecPer {...props}></DriveBeSecPer>
        </Col>

        <Col span={12}>
          {/*单车报警次数趋势图...*/}
          <CarAlarmTrend {...props}></CarAlarmTrend>
        </Col>

        <Col span={24}>
          {/*同行比较...*/}
          <PeerComparisonCar {...props}></PeerComparisonCar>
        </Col>
      </Row>
    </div>
  );
};
export default CarIndexPanel;
